﻿
@model Zor_Web.Models.Stat.V_Preview
@using Webdiyer.WebControls.Mvc;
@using Zor_Tools;
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>预览总表</title>
    <link href="~/Content/LayerUI/src/css/layui.css" rel="stylesheet" />
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Styles/zor.css" rel="stylesheet" />
    <!-- 框架必要 -->
    <script src="~/Content/Scripts/jquery/jquery-1.9.1.min.js"></script>
    <script src="~/Content/Scripts/learunui-framework.js"></script>
    <script src="~/Content/Scripts/Zor_AJax.js"></script>
    <!-- 消息提示 -->
    <script language='javascript' src='~/Content/layer/layer.js'></script>
</head>
<body>
    <div class="layui-tab layui-tab-brief main-tab-container">
        <div class="col-sm-12 ct-padding">
            <div class="col-sm-9 ct-padding">
                <button id="btnExport" class="layui-btn layui-btn-default layui-btn-small"><span class="glyphicon glyphicon-arrow-down"></span> 导出 </button>
                <button id="btnReplace" class="layui-btn layui-btn-normal layui-btn-small"> <span class="glyphicon glyphicon-refresh"></span>刷新</button>
                <button id="btnDetailInfo" class="layui-btn  layui-btn-normal layui-btn-small"><span class="glyphicon glyphicon-search"></span> 详细信息 </button>
            </div>           
        </div>

        <div class="col-sm-12  layui-tab-content">
            <table class="layui-table" lay-skin="line">
                <thead>
                    <tr>
                        <th></th>
                        <th>社区名称</th>
                        <th>楼宇名称</th>
                        <th>楼层数</th>
                        <th>单元数</th>
                        <th>房屋数</th>
                        <th>已出租数</th>
                        <th>已收户数</th>
                        <th>未收户数</th>                        
                    </tr>
                </thead>
                <tbody id="accordion">
                    @foreach (var item in Model.PageData)
                    {
                        <tr>
                            <td><input type="checkbox" name="chk" id="@item.Bd_Id" value="@item.Bd_Id" /></td>
                            <td>@item.Dt_Name</td><!--社区名称1-->
                            <td>@item.Bd_Name</td><!--楼宇名称2-->
                            <td>@item.Bd_Ground</td><!--楼层数3-->
                            <td>@item.UimNumber</td><!--单元数4-->
                            <td>@item.Number</td><!--房屋数5-->
                            <td>@item.ANumber</td><!--已出租数6-->
                            <td>@item.PNumber</td><!--已收户数7-->
                            <td>@(item.ANumber - item.PNumber)</td><!--未收户数8-->                           
                        </tr>
                    }
                </tbody>
            </table>
            <div class="row">
                <div class="col-sm-10">
                    @Html.Pager(Model.PageData, new PagerOptions { PageIndexParameterName = "index", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "", @class = "pagination" })
                </div>
                <div class="col-sm-2">
                    共 @Model.PageData.TotalItemCount 条记录，页 @Model.PageData.CurrentPageIndex/@Model.PageData.TotalPageCount
                </div>
            </div>
        </div>
    </div>
    <!-- 模态选中楼宇下的房屋 -->
    <div id="DetailInfoModal" style="display: none;padding: 20px;">
        <div class="col-sm-12  layui-tab-content">
            <table class="table table-hover table-mail">
                <thead>
                    <tr>
                        <th>房号</th>
                        <th>所在楼层</th>
                        <th>业主姓名</th>
                        <th>身份证号</th>
                        <th>联系电话</th>
                        <th>业主性别</th>
                        <th>房屋面积</th>
                        <th>房屋性质</th>
                        <th>房屋属性</th>
                        <th>房屋用途</th>
                        <th>第几户</th>
                        <th>出租状态</th>
                    </tr>
                </thead>
                <tbody id="accordion1"></tbody>               
            </table>           
        </div>
    </div>
    <!-- 导出模态 -->
    <form action="/Stat/PreviewMeg" enctype="multipart/form-data" method="post" id="formDownload">
        <div id="exportHtml" style="display:none;">
            <div class="eh_wrap">
                <div class="eh_head">
                    <p style="">请选择您要导出的数据列</p>
                </div>
                <table width="100%" cellpadding="5" cellspacing="0" style="text-align:center;">
                    <tr>
                        <td><input id="Dt_Name" type="checkbox" value="社区名称" name="chk_list" checked="checked" /><label>社区名称</label></td>
                        <td><input id="Bd_Name" type="checkbox" value="楼宇名称" name="chk_list" checked="checked" /><label>楼宇名称</label></td>                      
                    </tr>
                    <tr>
                        <td><input id="Bd_Ground" type="checkbox" value="楼层数" name="chk_list" checked="checked" /><label>楼层数</label></td>
                        <td><input id="UimNumber" type="checkbox" value="单元数" name="chk_list" checked="checked" /><label>单元数</label></td>                       
                    </tr>
                    <tr>
                        <td><input id="Number" type="checkbox" value="房屋数" name="chk_list" checked="checked" /><label>房屋数</label></td>
                        <td><input id="ANumber" type="checkbox" value="已出租数" name="chk_list" checked="checked" /><label>已出租数</label></td>                    
                    </tr>
                    <tr>
                        <td><input id="PNumber" type="checkbox" value="已收户数" name="chk_list" checked="checked" /><label>已收户数</label></td>
                        <td><input id="NPNumber" type="checkbox" value="未收户数" name="chk_list" checked="checked" /><label>未收户数</label></td>                     
                    </tr>
                </table>
                <div class="box-footer">
                    <button type="submit" id="btnExportSure" class="btn btn-info pull-right" style=" margin-right:30px;">
                        <i class="fa fa-repeat"></i>导出
                    </button>
                    <input type="hidden" id="PreviewMeg" name="PreviewMeg" value="" />
                    <input type="hidden" id="where" name="where" value="" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<script>

    /**
   * 刷新
   **/
    $(function () {
        $("#btnReplace").click(function () {
            Replace();
        })
    })

    /**
    * 详细信息
    **/
    $(function () {
        $("#btnDetailInfo").click(function () {
            var checkId = CheckboxValueIDs();  //获取多选框的值           
            if (checkId.length == 0) {
                layer.msg("请选择要查看的详细信息！");
                return;
            }
            if (checkId.length > 1) {
                layer.msg("仅可选择一条信息查看！");
                return;
            }
            LayerOpen('1200px', '630px', '详细信息', $('#DetailInfoModal')); //打开详细信息模态框 
            var html = "";          
            //getAjax("/Stat/LoadDetailInfoModal", { "Bd_ID": checkId }, function (data) {
                ZorPostSimpleData("/Stat/LoadDetailInfoModal", JSON.stringify({ "Bd_ID": checkId[0] }), function (data) {               
                accordionJson = eval( data );
                $.each(accordionJson, function (i) {
                    html += "<tr>";
                    html += "<td>" + accordionJson[i].Hs_Number + "</td>";
                    html += "<td>" + accordionJson[i].Hs_InFloor + "</td>";
                    html += "<td>" + accordionJson[i].NatPer_Name + "</td>";
                    html += "<td>" + accordionJson[i].NatPer_IDNumber + "</td>";
                    html += "<td>" + accordionJson[i].NatPer_Phone + "</td>";
                    html += "<td>" + accordionJson[i].NatPer_Sex + "</td>";
                    html += "<td>" + accordionJson[i].Hs_Proportion + "</td>";
                    html += "<td>" + accordionJson[i].Hs_Nature + "</td>";
                    html += "<td>" + accordionJson[i].Hs_attribute + "</td>";
                    html += "<td>" + accordionJson[i].Hs_HousUse + "</td>";
                    html += "<td>" + accordionJson[i].Hs_household + "</td>";
                    html += "<td>" + accordionJson[i].Statue + "</td>";                   
                    html += "</tr>";
                });
                $("#accordion1").empty().append(html);
            })
        })
    })

    /*导出*/
    $("#btnExport").click(function () {
        layer.open({
            type: 1,
            title: '导出提示',
            shade: false,
            skin: 'layui-layer-rim',
            area: ['620px', '280px'], //宽高
            content: $('#exportHtml')
        });
    });
    /*导出交互*/
    $("#btnExportSure").click(function () {
        var arr = new Array();
        $("[name='chk_list']").each(function () {
            if ($(this).is(":checked")) {
                arr.push($(this).attr("id") + "|" + $(this).val());
            }
        });
        $("#PreviewMeg").val(arr);
        document.getElementById('formDownload').submit();
        layer.closeAll();
    });
</script>